<template>
    <div class="box">
        <header class="header">
            <van-nav-bar title="详情" left-arrow @click-left="$router.go(-1)">
                <template #right>
                    <van-icon name="ellipsis" size="18" />
                </template>
            </van-nav-bar>
        </header>
        <div class="content">
            <div><img style="width:100%" :src="detailInfo.image" alt=""></div>
            <div>{{ detailInfo.title }}</div>
            <div style="color:red">￥ {{ detailInfo.price }}</div>
        </div>
    </div>
    <footer class="footer">
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
            <van-action-bar-icon icon="cart-o" text="购物车" :badge="totalCount" @click="$router.push('/cart')" />
            <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
            <van-action-bar-button type="warning" text="加入购物车" @click="addCart" />
            <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>
    </footer>
</template>

<script>
import request from '@/utils/request'
import { useCounterStore } from '@/store/index' // 1.引入仓库
import { mapState, mapActions } from 'pinia' // 2.引入辅助函数
export default {
    data() {
        return {
            detailInfo: {}
        }
    },
    created() {
        request.get('/detail', {
            params: {
                id: this.$route.params.id
            }
        }).then(res => {
            if (res.data.code == 200) {
                this.detailInfo = res.data.data
            }
        })
    },
    computed: {
        ...mapState(useCounterStore, ['totalCount'])
    },
    methods: {
        ...mapActions(useCounterStore, ['addItem']),
        addCart() {
            if (localStorage.getItem('token')) {
                // 说明已登录
                // console.log('已登录')
                this.addItem(this.detailInfo)
            } else {
                // 未登录
                this.$router.push('/login')
            }
        }
    }
}
</script>